<template>
  <div>
    月份
    <el-select v-model="month[0]" @change="editMonth(0)">
      <el-option v-for="item in options" :value="item.value" :label="item.value" :keys="item.value"></el-option>
    </el-select>
    <el-select v-model="month[1]" @change="editMonth(1)">
      <el-option v-for="item in options" :value="item.value" :label="item.value" :keys="item.value"></el-option>
    </el-select>
    <el-select v-model="month[2]" @change="editMonth(2)">
      <el-option v-for="item in options" :value="item.value" :label="item.value" :keys="item.value"></el-option>
    </el-select>
    <el-select v-model="month[3]" @change="editMonth(3)">
      <el-option v-for="item in options" :value="item.value" :label="item.value" :keys="item.value"></el-option>
    </el-select>


    <el-table :data="tableData">
      <el-table-column label="姓名" prop="name">
        <template v-slot="scope">
          <el-input type="text" v-model="scope.row.name"/>
        </template>
      </el-table-column>
      <el-table-column label="邮箱" prop="email">
        <template v-slot="scope">
          <el-input type="text" v-model="scope.row.email"/>
        </template>
      </el-table-column>
    </el-table>

    <ul>
      <template v-for="(item,index) in myArr">
        <li :key="index">{{ item }}</li>
      </template>
    </ul>
  </div>
</template>

<script>
export default {
  name: "watchOptions",
  data() {
    return {
      myArr: 'arr1',
      arr1: [
        {index: 6}, {index: 12}
      ],
      arr2: [
        {index: 10}, {index: 20}
      ],
      options: [],
      month: [],
      month_old: [5, 9, 10, 4],
      myData: undefined,
      tableData: [
        {
          name: 'jack',
          email: 'jack@123'
        },
        {
          name: 'marry',
          email: 'marry@123'
        }
      ],
    }
  },
  created() {
    this.init()
  },
  computed: {
    getMonth() {
      return [...this.month]
    },
  },
  watch: {
    getMonth: {
      handler(n, o) {
        console.log(n, o)
      }
    }
  },
  methods: {
    init() {
      for (let i = 1; i < 13; i++) {
        this.options.push({
          value: '' + i,
          label: '' + i
        })
      }

      this.month = [1, 6, 7, 12]
      this.month = JSON.parse(JSON.stringify(this.month))
      console.log(this.month)
    },

    editMonth(k) {
      if (k % 2) {
        this.month[3 - k] = Number(Number(this.month[k]) + 1) % 12 === 0 ? 12 : (Number(this.month[k]) + 1) % 12
      } else {
        this.month[3 - k] = Number(this.month[k] - 1 ? this.month[k] - 1 : 12)
      }
      this.print()
    },
    print() {
      this.month.forEach((item, index) => {
        this.month[index] = Number(this.month[index])
        this.month_old[index] = Number(this.month_old[index])
      })
      // console.log('新值:', JSON.parse(JSON.stringify(this.month)))
      // console.log('旧值:', JSON.parse(JSON.stringify(this.month_old)))
    }
  }
}
</script>

<style scoped>
.el-select {
  margin: 10px;
}

.el-input {
  width: 300px
}
</style>
